// 创建页面节点，渲染在 rich-text 标签中
// keyword 匹配的关键字
// value 要进行匹配的值
export default function createNodes(keyword, value) {
  const nodes = []; // 存放当前歌曲项要渲染的节点

  // startsWith()：ES6 的方法，判断是否以某一个关键字开头
  if(keyword.toUpperCase().startsWith(value.toUpperCase())) { 
    // 匹配到的关键字
    const key1 = keyword.slice(0, value.length);
    // 将匹配到的关键字转换为 node 节点
    const node1 = {
      name: "span",
      attrs: { style: "color: #26ce8a; font-size: 14px;" },
      children: [{ 
        type: "text", 
        text: key1
      }]
    }
    // 将 node1 插入要渲染的 nodes 数组中
    nodes.push(node1);

    // 剩余的关键字
    const key2 = keyword.slice(value.length);
    // 将匹配到的关键字转换为 node 节点
    const node2 = {
      name: "span",
      attrs: { style: "font-size: 14px;" },
      children: [{ 
        type: "text",
        text: key2
      }]
    }
    // 将 node2 插入要渲染的 nodes 数组中
    nodes.push(node2);
  } else {
    // 没有匹配上的话
    const node = {
      name: "span",
      attrs: { style: "font-size: 14px;" },
      children: [{
        type: "text",
        text: keyword
      }]
    }
    // 将 node 插入要渲染的 nodes 数组中
    nodes.push(node);
  }

  return nodes;
}